<route>
    {
        meta: {
            layout: 'index',
            title:'职级分类'
        }
    }  
</route>
<template>
    <view>
        <a-row>
            <a-input-search v-model:value="searchKey" placeholder="请输入名称"
                style="width: 200px; margin-bottom: 10px; margin-right: 50px;" @search="handleSearch()" />
            <a-button type="primary" style="margin-bottom: 10px; width: 80px;" @click="handleAdd(null)">
                <template #icon><plus-outlined /></template>新增
            </a-button>
        </a-row>

        <a-table :columns="columns" :data-source="dataSource" :pagination="false">
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex === 'action'">
                    <div style="margin-right: 8px;">
                        <span>
                            <a-button type="link" @click="handleEdit(record)">
                                <FormOutlined />
                            </a-button>
                            <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="handleDelete(record.id)">
                                <a-button type="link" danger>
                                    <DeleteOutlined />
                                </a-button>
                            </a-popconfirm></AntdZh>
                        </span>
                    </div>
                </template>
            </template>
        </a-table>
        <AntdConfirmModal :title="title" ref="modalRef" width="550px" :keepSlot="false" @confirm="submitForm">
            <a-form :model="form" name="basic" :label-col="{ span: 5 }">
                <a-row>
                    <a-col :span="20">
                        <a-form-item label="职级类别" name="typeName" :rules="[{ required: true, message: '请输入分类名称' }]">
                            <a-input v-model:value="form.typeName" style="width: 365px;" placeholder="请输入分类名称" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="编码" name="typeCode" :rules="[{ required: true, message: '请输入编码' }]">
                            <a-input v-model:value="form.typeCode" style="width: 365px;" placeholder="请输入编码" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="排序" name="orderNum">
                            <a-input-number v-model:value="form.orderNum" style="width: 365px;" controls-position="right"
                                :min="0" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="状态" name="status">
                            <!-- <a-input-number v-model:value="form.status" style="width: 365px;"
                                        controls-position="right" :min="0" /> -->
                            <a-switch v-model:checked="form.status" checked-value="1" un-checked-value="0"
                                checked-children="启用" un-checked-children="禁用" @change="swiChange" />
                        </a-form-item>
                    </a-col>
                    <a-col :span="20">
                        <a-form-item label="备注" name="remark">
                            <a-input v-model:value="form.remark" style="width: 365px;" />
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </AntdConfirmModal>
    </view>
</template>
<script setup>
import { PlusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { createOne, queryOne, queryAll, updateOne, deleteOne } from '@/module/system/api/job_grade_type'
import { columns, formValue } from './index';
import useApp from '@/hooks'
const { $ } = useApp()
const dataSource = ref([]);
const form = ref(formValue);
const modalRef = ref(null);
const title = ref('新增职级分类')
// 新增操作
function handleAdd() {
    console.log('formValue', formValue);
    form.value = formValue
    title.value = '新增职级'
    // 如果为空-> 新公司
    // if ($.isEmpty(e)) {
    //     title.value = '新增职级'
    // } else {
    //     //新增子公司
    //     title.value = `新增【${e.typeName}】的子公司`
    //     form.value.pid = e.id;
    // }
    modalRef.value.openModal()
}
// 删除操作
function handleDelete(id) {
    deleteOne(id).then(r => {
        getList()
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
    })
}
// 编辑操作
function handleEdit(e) {
    title.value = `【${e.typeName}】信息修改`
    queryOne(e.id).then(res => {
        form.value = res
        modalRef.value.openModal()
    })
}
function swiChange(checked, e) {
    form.value.status = checked
}
// 提交
function submitForm() {
    // 没有ID 就是新增
    if ($.isEmpty(form.value.id)) {
        createOne(form.value).then(r => {
            getList()
            modalRef.value.closeModal()
            $.showToast({
                title: '新建成功',
                icon: 'success'
            })
        })
    } else {
        updateOne(form.value).then(r => {
            getList()
            modalRef.value.closeModal()
            $.showToast({
                title: '更新成功',
                icon: 'success'
            })
        })
    }
}
// 搜索
function handleSearch() {
   
}
// 查询列表
function getList() {
    queryAll().then(res => {
        console.log(res)
        dataSource.value = res;
    })
}
getList()
</script>